<template>
<!-- 这是导航栏中的出租房源板块 -->
  <div>
    <div class="ctn">
      <div class="ctnInfo">
        <div class="ctnBox">
          <h1>来爱彼迎当房东，轻松赚取收入</h1>

          <!--用户必填-->

          <div class="ctnLab">看看您可以赚取多少收入</div>

          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-input v-model="formInline.user" class="dizhi" id="dizhi-one" placeholder="请输入位置"></el-input>

            <el-select
              v-model="formInline.region"
              placeholder="出租房型"
              label="整间房源"
              class="ctnLab-left"
              id="diqu"
            >
              <el-option label="整间房源" value="三个人"></el-option>

              <el-option label="独立房间" value="一个人"></el-option>

              <el-option label="合住房间" value="二个人"></el-option>
            </el-select>

            <!-- <el-form-item label="活动区域"> -->

            <el-select
              v-model="formInline.region"
              placeholder="可容纳房客"
              class="ctnLab-right"
              id="fangyuan"
            >
              <el-option label="一位房客" value="独立房间"></el-option>

              <el-option label="两位房客" value='整间房源'></el-option>

              <el-option label="三位房客" value='整间房源'></el-option>

              <el-option label="四位房客" value='整间房源'></el-option>

              <el-option label="五位房客" value='整间房源'></el-option>

              <el-option label="六位房客" value='整间房源'></el-option>

              <el-option label="七位房客" value='整间房源'></el-option>

              <el-option label="八位房客" value='整间房源'></el-option>

              <el-option label="九位房客" value='整间房源'></el-option>

              <el-option label="十位房客" value='整间房源'></el-option>

              <el-option label="十一位房客" value='整间房源'></el-option>

              <el-option label="十二位房客" value='整间房源'></el-option>
            </el-select>

            <!-- </el-form-item> -->
          </el-form>

          <div class="jiage">
            <div class="jiage-one">
              <span>￥2,645</span>
              每月
              <span></span>
            </div>
          </div>

          <el-button type="primary" @click="submitForm('ruleForm')" class="tijiao-one">开始</el-button>
        </div>
      </div>
    </div>

    <!-- 中间部分 -->

    <div class="container" id="lease-sum">
      <div class="row">
        <div class="col-sm-4 yuanyin yuanyin-left" id="yuanyin-left">
          <div class="yuanyin-header">为什么在爱彼迎出租房源？</div>

          <p
            class="yuanyin-shenti"
          >不论您出租的是哪种类型的房屋或房间，爱彼迎都可以让您轻松、安全地接待旅行者。 可订日期、价格、房屋守则、与房客的互动方式等，完全由您掌控。</p>
        </div>

        <div class="col-sm-4 yuanyin">
          <div class="yuanyin-header">爱彼迎保护房东的利益</div>

          <p class="yuanyin-shenti">为了保护您、您的房源和物品的安全，我们为每笔预订均提供价值100万美元的财产损坏保障，以及价值100万美元的意外事件保障险。</p>
        </div>

        <div class="col-sm-4 yuanyin">
          <div class="yuanyin-header">为什么选择在爱彼迎出租房源？</div>

          <p
            class="yuanyin-shenti"
          >爱彼迎始终要求房客在提供某些信息后才可预订，如已验证的手机号和邮箱地址。 如果您想更安心，还可以要求房客提供其他房东的推荐语和已验证身份。</p>
        </div>
      </div>

      <!-- 内容区第二块 -->

      <div class="sanbuzou">
        <h1>出租三步走</h1>
      </div>

      <div class="row">
        <div class="col-sm-4 yuanyin yuanyin-left" id="yuanyin-left">
          <div class="one-img"></div>

          <div class="yuanyin-header">免费发布房源</div>

          <p class="yuanyin-shenti">无需注册费用即可分享任意空间，从合用客厅到度假住宅不一而足。</p>
        </div>

        <div class="col-sm-4 yuanyin">
          <div class="two-img"></div>

          <div class="yuanyin-header">自主决定出租方式</div>

          <p class="yuanyin-shenti">您可自主选择时间安排、价格和房客要求。我们将全程协助。</p>
        </div>

        <div class="col-sm-4 yuanyin">
          <div class="three-img"></div>

          <div class="yuanyin-header">欢迎您的首批房客</div>

          <p class="yuanyin-shenti">您的房源上线后，符合条件的房客会与您联系。如果您有任何问题，在房客入住前就可以给他们发消息。</p>
        </div>
      </div>

      <!-- 内容区第三块 -->
      <div class="row disan">
        <div class="col-xs-6">
          <div class="zuoyong-img">
            <img src="../image/lease-img.jpg" alt>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="zuoyong-wenzi">
            <div class="right-biaodian">“</div>
            <div class="right-biaoti">出租房源帮助我支付了新厨房和其他装修项目的费用。」</div>
            <div class="right-didian">Tessa在伦敦出租房屋赚取额外收入</div>
            <div class="right-gengduo">
              <div class="biankuang">了解他们的出租方式</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容区第四块 -->
      <!-- <div></div> -->
    </div>
    <leasemore></leasemore>
    <!--底部-->
    <footerone></footerone>
  </div>
</template>

<script>
import footerone from "../views/footerone.vue";

export default {
  components: {
    footerone,
  },
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      }
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style>
#lease-sum {
  margin-top: 80px;
}

#yuanyin-left {
  padding: 0px 50px 0px 15px;
}

.yuanyin-header {
  font-size: 24px;
  font-weight: 800;
  color: #484848;
}

.yuanyin-shenti {
  font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto,
    Helvetica Neue, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75em !important;
  color: #484848 !important;
  margin-top: 10px;
}

.sanbuzou {
  text-align: center;
  margin-top: 120px;
  padding: 0px;
}

.sanbuzou h1 {
  font-size: 60px;
  font-weight: 800;
  margin-bottom: 64px;
}

.one-img {
  width: 48px;
  height: 48px;
  background: url(../image/lease-one.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin-bottom: 20px;
}
.disan {
  margin: 100px 0px 50px 0px;
}
.two-img {
  width: 48px;
  height: 48px;
  background: url(../image/lease-two.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin-bottom: 20px;
}

.three-img {
  width: 48px;
  height: 48px;
  background: url(../image/lease-three.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin-bottom: 20px;
}
.zuoyong {
  margin-top: 100px;
  /* width: 30%; */
}
.zuoyong-img {
  width: 516px;
  height: 516px;
  /* display: inline-block; */
  margin-right: 66px;
}
.zuoyong-img img {
  width: 100%;
  height: 100%;
}
.zuoyong-wenzi {
  margin-top: 50px;
}
.right-biaodian {
  font-size: 100px;
  color: #fdb32b;
  font-weight: bold;
}
.right-biaoti {
  font-size: 32px;
}
.right-didian {
  font-size: 16px;
  color: #484848;
  margin: 10px 0px;
}
.right-gengduo {
  /* width: 188px;
  height: 24px; */
  padding: 10px 22px;
  border: 2px solid #484848;
  width: 188px;
  height: 44px;
  font-weight: 800;
  border-radius: 4px;
}
.biankuang {
}
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

input,
button {
  outline: none;
}

img {
  border: 0;
}

.lf {
  float: left;
}

.rt {
  float: right;
}

.cleaer {
  clear: both;
}

/*头部*/

.header {
  padding: 16px;
  background: #fff;
  border: 1px solid #e1e1e1;
}

.top,
.ftInfo,
.ctnInfo {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.top .logo {
  display: block;
  float: left;
}

.top .logo img {
  width: 240px;
  height: 60px;
}

.top .hint {
  float: right;
  height: 60px;
  line-height: 60px;
}

.top .hint span a {
  color: #06c;
}

/*中部*/

.ctn {
  position: relative;
  width: 100%;
  height: 602px;
  background: url("../image/lease-bj.jpg") no-repeat top center/cover;
  margin-bottom: 20px;
}

.ctn .ctnBox {
  width: 460px;
  height: 442px;
  float: right;
  background: #fff;
  padding: 35px 35px 0;
  margin: 78px 0px 0px 0px;
  border-radius: 8px;
}

.dizhi {
  height: 46px;
  margin: 20px 0px 0px 0px;
}

#dizhi-one {
  height: 46px;
}

#fangyuan,
#diqu {
  height: 46px;
}

.ctn .ctnBox h1 {
  margin: 0px 0px 20px 0px;
  font-weight: 800;
}

.ctnLab {
  font-size: 16px;
  font-weight: 800;
}

.ctnLab-left {
  width: 222px;
  height: 46px;
  margin-right: 11px;
}

.ctnLab-right {
  width: 153px;
  height: 46px;
  margin-top: 10px;
}

.jiage {
  margin-top: 16px;
  width: 460px;
  height: 44px;
}

.jiage-one {
  width: 100%;
  height: 100%;
}

.jiage span {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.6px;
  margin-right: 5px;
}

#tijiao {
  margin-left: 0px;
}

.tijiao-one {
  width: 390px;
  height: 46px;
  margin-top: 20px;
  background: #ff5a5f;
  font-size: 16px;
  font-weight: 800;
  border: none;
}

.tijiao-one:hover {
  background: #ff5a5f;
}
</style>
